<template>
  <div class="dashboard">
    <!-- 顶部数据卡片 -->
    <div class="data-cards">
      <div class="card">
        <div class="card-title">待确认订单</div>
        <div class="card-content">
          <div class="number">{{ countDataToday.countSuccess }}</div>
          <div class="trend">
            <span>较上月</span>
            <span class="percent up" v-if="countDataToday.countSuccessGrowth >= 0">+{{ countDataToday.countSuccessGrowth*100 }}%</span>
            <span class="percent down" v-else>{{ countDataToday.countSuccessGrowth*100 }}%</span>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-title">待分配订单</div>
        <div class="card-content">
          <div class="number">{{ countDataToday.countAllocate }}</div>
          <div class="trend">
            <span>较上月</span>
            <span class="percent up" v-if="countDataToday.countAllocateGrowth >= 0">+{{ countDataToday.countAllocateGrowth*100 }}%</span>
            <span class="percent down" v-else>{{ countDataToday.countAllocateGrowth*100 }}%</span>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-title">运输中订单</div>
        <div class="card-content">
          <div class="number">{{ countDataToday.countTransportIng }}</div>
          <div class="trend">
            <span>较上月</span>
            <span class="percent up" v-if="countDataToday.countTransportIngGrowth >= 0">+{{ countDataToday.countTransportIngGrowth*100 }}%</span>
            <span class="percent down" v-else>{{ countDataToday.countTransportIngGrowth*100 }}%</span>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-title">完成订单</div>
        <div class="card-content">
          <div class="number">{{ countDataToday.countComplete }}</div>
          <div class="trend">
            <span>较上月</span>
            <span class="percent down" v-if="countDataToday.countCompleteGrowth < 0">{{ countDataToday.countCompleteGrowth*100 }}%</span>
            <span class="percent up" v-else>+{{ countDataToday.countCompleteGrowth*100 }}%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间数据展示 -->
    <div class="middle-stats">
      <div class="stat-item">
        <div class="stat-value">890</div>
        <div class="stat-label">待确认订单</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">190</div>
        <div class="stat-label">待分配订单</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">120</div>
        <div class="stat-label">待装货订单</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">455</div>
        <div class="stat-label">待签收订单</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">55</div>
        <div class="stat-label">待结算订单</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">290</div>
        <div class="stat-label">待付款订单</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">99</div>
        <div class="stat-label">待开票订单</div>
      </div>
    </div>

    <!-- 底部图表 -->
    <div class="chart-container">
      <div class="chart-title">本月订单趋势</div>
      <div id="trend-chart" style="width: 100%; height: 300px;"></div>
    </div>

    <!-- 表格 -->
    <div class="table-container">
      <div class="table-title">实时订单</div>
      <el-table :data="tableData" style="width: 100%;">
        <el-table-column prop="orderId" label="订单号" width="230">
        </el-table-column>
        <el-table-column prop="origin" label="始发地" width="120">
        </el-table-column>
        <el-table-column prop="destination" label="目的地" width="120">
        </el-table-column>
        <el-table-column prop="customerName" label="客户名称" width="180">
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.orderStatus === 2" type="success">待调度</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="货物数量" width="150">
          <template slot-scope="scope">
            {{ scope.row.quantity }}/箱
          </template>
        </el-table-column>
        <el-table-column prop="volume" label="总体积" width="150">
          <template slot-scope="scope">
            {{ scope.row.volume }}/m³
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="总重量" width="150">
          <template slot-scope="scope">
            {{ scope.row.weight }}/kg
          </template>
        </el-table-column>
        <el-table-column prop="fee" label="运费合计" width="150"></el-table-column>
        <el-table-column prop="orderTime" label="下单时间" width="200"></el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios';
export default {
  name: 'Dashboard',
  data() {
    return {
      chart: null,
      countDataToday: {},
      countDataMouth: {},
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      chartData: {
        dates: [],
        values: []
      }
    }
  },
  mounted() {
    this.initChart()
    this.findCountData()
    this.findCountMouth();
    this.getTableData()
    this.getChartData() // 获取图表数据
    // this.startXxlJob() // 调用定时任务方法
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('trend-chart'))
      const option = {
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.chartData.dates,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          }
        },
        series: [{
          data: this.chartData.values,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            color: '#1890ff',
            width: 2
          },
          itemStyle: {
            color: '#1890ff'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(24,144,255,0.3)'
              }, {
                offset: 1,
                color: 'rgba(24,144,255,0)'
              }]
            }
          }
        }]
      }
      this.chart.setOption(option);
    },
    getChartData() {
      axios.get('/api/statistics/statistics/getChartData').then(res => {
        if(res.data.code === 200) {
          this.chartData.dates = res.data.data.dates;
          this.chartData.values = res.data.data.values;
          this.initChart(); // 重新初始化图表
        }
      })
    },
    findCountData() {
      axios.get(`/api/statistics/statistics/count`).then(res => {
        this.countDataToday = res.data.data;
      })
    },
    findCountMouth(){
      axios.get(`/api/statistics/statistics/countMouth`).then(res => {
        this.countDataMouth = res.data.data;
      })
    },
    getTableData() {
      axios.get(`/api/statistics/statistics/getData/${this.pageNum}/${this.pageSize}`).then(res => {
        this.total = res.data.data.total;
        this.tableData = res.data.data.records;
      });
      // 每分钟执行一次
      // setInterval(this.getTableData, 120000);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getTableData();
    },
    startXxlJob() {
      axios.get(`/api/statistics/statistics/startXxlJob/${this.pageNum}/${this.pageSize}`).then(res => {
        if (res.data.code === 200) {
          this.$message.success('定时任务启动成功')
        } else {
          this.$message.error('定时任务启动失败')
        }
      });
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.data-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.card {
  flex: 1;
  margin: 0 10px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-title {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}

.number {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.trend {
  font-size: 12px;
  color: #999;
}

.percent {
  margin-left: 8px;
}

.percent.up {
  color: #52c41a;
}

.percent.down {
  color: #f5222d;
}

.middle-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.chart-container {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}

.table-container {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}
</style>
